@import "bootstrap-sprockets";
@import "bootstrap";

$gray-medium-light: #eaeaea;
$gray-light: #777;
$gray: #555;
$gray-darker: #222;
$white: #fff;



@mixin box_sizing { 
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;  
        box-sizing: border-box;
}




.debug_dump {clear: both;
        float: left;
        width: 100%; margin-top: 45px;
        @include box_sizing;
}

/* universal */
body {
        padding-top: 60px;
}
section { overflow: auto;
}
textarea {
        resize: vertical;
}
.center {
        text-align: center;
}
.center h1 { margin-bottom: 10px;
}

/* typography */
h1, h2, h3, h4, h5, h6 { 
        line-height: 1;
}

h1 {
        font-size: 3em; 
        letter-spacing: -2px; 
        margin-bottom: 30px;
         text-align: center;
 }

 h2 {
         font-size: 1.2em;
          letter-spacing: -1px; 
          margin-bottom: 30px; 
          text-align: center;
          font-weight: normal;
          color: $gray-light;
  }

  p{
          font-size: 1.1em;
           line-height: 1.7em;
   }

/* header */

   #logo {
           float: left;
           margin-right: 10px;
            font-size: 1.7em;
            color: $white; 
            text-transform: uppercase;
             letter-spacing: -1px; 
             padding-top: 9px;
              font-weight: bold;
      }

      #logo:hover {
              color: $white; 
              text-decoration: none;
      }



   /* footer */
   footer {
           margin-top: 45px;
           padding-top: 5px;
           border-top: 1px solid $gray-medium-light; 
           color: $gray-light;
           a { 
               color: $gray;
                 &:hover {
                                 color: $gray-darker;
                                }
             }
             small {
                                 float: left;
                  }

         ul {
                 float: right;
                 list-style: none;
                 li {
                         float: left;
                         margin-left: 15px;
                 }
            }
         }
         
         
         /* sidebar */
         aside { 
                 section.user_info {
                                 margin-top: 20px;
                        }
                 section {
                     padding: 10px 0; 
                     margin-top: 20px; 
                     &:first-child {
                                border: 0;
                                 padding-top: 0;
                                     }
                        span {
                         display: block;
                         margin-bottom: 3px; 
                         line-height: 1;
                                }
                         h1 {
                                 font-size: 1.4em;
                                 text-align: left;
                                  letter-spacing: -1px;
                                   margin-bottom: 3px;
                                   margin-top: 0px;
                          }
                  }
         }

         .gravatar {
                          float: left; 
                          margin-right: 10px;
                 }

        .gravatar_edit {
           margin-top: 15px;
         }
         
         
         /* forms */
         input, textarea, select, .uneditable-input { 
                 border: 1px solid #bbb;
                 width: 100%;
                 margin-bottom: 15px;
                 @include box_sizing; 
         }
        input {
                         height: auto !important;
        }
        
        #error_explanation {
         color: red; 
     ul {
         color: red;
        margin: 0 0 30px 0;
      }
}

     .field_with_errors { 
 @extend .has-error; 
 .form-control {
        color: $state-danger-text;
      }
}

 .checkbox {
            margin-top: -10px;
            margin-bottom: 10px;
            span {
                    margin-left: 20px;
                    font-weight: normal;
            }
    }

    #session_remember_me {
            width: auto;
            margin-left: 0;
     }
.users {
        list-style: none;
        margin: 0;
        li {
                overflow: auto;
                padding: 10px 0;
                border-bottom: 1px solid $gray-lighter;
        }
}